import getComponentRootDom from "./getComponentRootDom.js" //获取组件根dom
import Icon from "@/components/icon" //icon组件
import styles from "@/styles/message.module.less" //css module
/**
 * 弹出消息
 * @param {String} content 消息内容
 * @param {String} type 消息类型 info error success warn
 * @param {Number} duration 多久后消失
 * @param {HTMLElement} container 父容器，消息会显示到该容器正中；如果不传，则显示到页面正中
 */
export default function(content, type="info", duration=2000, container){
    //icon组件根dom
    const icon = getComponentRootDom(Icon, {type:`${type}`})
    icon.classList.add(styles.icon)


    // 创建消息元素
    const div = document.createElement('div');
    div.classList.add(styles.message)
    div.classList.add(styles['message-' + type])
    // outerHTML将dom节点在字符串里正常解析
    div.innerHTML = `<span>${icon.outerHTML}</span><span>${content}</span>`
    
    if(container){ //父容器，消息会显示到该容器正中
        //判断是否具备作为参照点的条件
        if(getComputedStyle(container).position === 'static'){
            container.style.position = 'relative'
        }
        container.appendChild(div)
    }else{ //如果不传，则显示到页面正中
        document.body.appendChild(div);
    }

    getComputedStyle(div).width //强制渲染

    div.style.transform = 'translate(-50%, -50%) translateY(0px)' 
    div.style.opacity = 1
    setTimeout(() => { //duration后，提示框向上移动
        div.style.transform = 'translate(-50%, -50%) translateY(-20px)'
        div.style.opacity = 0
        div.addEventListener('transitionend', () => { //等待提示框向上移动过渡效果结束后，删除该看不见的提示框
            if(container){
                container.removeChild(div)
            }else{
                document.body.removeChild(div)
            }
        }, {once:true})
        // setTimeout(() => { //等待提示框向上移动过渡效果结束后，删除该看不见的提示框
        //     if(container){
        //         container.removeChild(div)
        //     }else{
        //         document.body.removeChild(div)
        //     }
        // }, 500)
    }, duration)
}